<template>
	<div class="ratings" v-el:ratings>
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<h1 class="score">{{seller.score}}</h1>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}%</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size="36" :score="seller.serviceScore"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">商品名称</span>
						<star :size="36" :score="seller.foodScore"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="delivery-wrapper">
						<span class="title">送达时间</span>
						<span class="delivery">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<rating-select :select-type="selectType" :only-content="onlyContent" :ratings="ratings"></rating-select>
			<div class="rating-wrapper">
				<ul>
					<li class="rating-item" v-for="rating in ratings" v-show="needShow(rating.rateType,rating.text)">
						<div class="avatar">
							<img :src="rating.avatar" width="28" height="28" />
						</div>
						<div class="content">
							<h1 class="name">{{rating.name}}</h1>
							<div class="star-wrapper">
								<star :size="24" :score="rating.score"></star>
								<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
							</div>
							<p class="text">{{rating.text}}</p>
							<div class="recommend" v-show="rating.recommend && rating.recommend.length">
								<span class="icon-thumb_up"></span>
								<span class="item" v-for="item in rating.recommend">{{item}}</span>
							</div>
							<div class="time">{{rating.rateTime | formatDate}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import {formatDate} from 'common/js/date';
	import star from 'components/star/star';
	import split from 'components/split/split';
	import ratingSelect from 'components/ratingSelect/ratingSelect';
	//所有
	const ALL = 2;

	export default {
		props:{
			seller:{
				type:Object
			}
		},
		data() {
			return {
				ratings:[],
				selectType:ALL,
				onlyContent:true
			}
		},
		created(){
			this.$http.get('/api/ratings').then((res)=>{
				res = res.body;
				if(res.errno === 0){
					this.ratings = res.data;
					this.$nextTick(()=>{
						this.scroll = new BScroll(this.$els.ratings,{
							click:true
						})
					})
				}
			})
		},
		methods:{
			needShow(type,text){
				if(this.onlyContent && !text){
					return false;
				}
				if(this.selectType === ALL){
					return true;
				}else{
					return type === this.selectType;
				}
			}
		},
		components:{
			star,
			split,
			ratingSelect
		},
		filters:{
			formatDate(time){
				let date = new Date(time);
				return formatDate(date,'yyyy-MM-dd hh:mm');
			}
		},
		events:{
			'ratingtype.select'(type){
				this.selectType = type;
				this.$nextTick(()=>{
					this.scroll.refresh();
				})
			},
			'content.toggle'(onlyContent){
				this.onlyContent = onlyContent;
				this.$nextTick(()=>{
					this.scroll.refresh();
				})
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	.ratings{
		position:absolute;
		top:174px;
		bottom:0;
		left:0;
		width:100%;
		overflow: hidden;
		.overview{
			display: flex;
			padding: 0 18px;
			.overview-left{
				flex: 0 0 137px;
				width: 137px;
				padding: 6px 0;
				border-right: 1px solid rgba(7,17,27,0.1);
				text-align: center;
				@media only screen and (max-width:320px){
					flex: 0 0 120px;
					width: 120px;
				}
				.score{
					margin-bottom: 6px;
					line-height:28px;
					font-size:24px;
					color:rgb(255,153,0);
				}
				.title{
					margin-bottom: 8px;
					font-size:12px;
					line-height:12px;
					color:rgb(7,17,27);
				}
				.rank{
					padding-bottom: 6px;
					font-size:10px;
					color:rgb(147,153,159);
					line-height:10px;
				}
			}
			.overview-right{
				flex: 1;
				padding: 6px 0 6px 24px;
				@media only screen and (max-width:320px){
					padding-left: 6px;
				}
				.score-wrapper{
					margin-bottom: 8px;
					font-size:0;
					.title{
						line-height:18px;
						font-size:12px;
						color:rgb(7,17,27);
						vertical-align:top;
					}
					.star{
						display:inline-block;
						vertical-align:top;
						margin: 0 12px;
					}
					.score{
						line-height:18px;
						display:inline-block;
						vertical-align:top;
						font-size:12px;
						color:rgb(255,153,0);
					}
				}
				.delivery-wrapper{
					font-size:0;
					.title{
						line-height:18px;
						font-size:12px;
						color:rgb(7,17,27);
					}
					.delivery{
						margin-left: 12px;
						font-size:12px;
						color:rgb(147,153,159);
					}
				}
			}
		}
		.rating-wrapper{
			padding: 0 18px;
			.rating-item{
				display:flex;
				padding:18px 0;
				border-bottom: 1px solid rgba(7,17,27,0.1);
				.avatar{
					flex:0 0 28px;
					width: 28px;
					margin-right: 12px;
					img{
						border-radius:50%;
					}
				}
				.content{
					flex:1;
					position:relative;
					.name{
						margin-bottom: 4px;
						line-height:12px;
						font-size:10px;
						color:rgb(7,17,27);
					}
					.star-wrapper{
						margin-bottom: 6px;
						font-size:0;
						.star{
							display:inline-block;
							vertical-align:top;
							margin-right: 6px;
						}
						.delivery{
							display:inline-block;
							vertical-align:top;
							line-height:12px;
							font-size:10px;
							color:rgb(147,153,159);
						}
					}
					.text{
						margin-bottom: 8px;
						line-height:18px;
						color:rgb(7,17,27);
						font-size:12px;
					}
					.recommend{
						line-height:16px;
						font-size:0;
						.icon-thumb_up,.item{
							display:inline-block;
							font-size:9px;
							margin: 0 8px 4px 0;
						}
						.icon-thumb_up{
							color:rgb(0,160,220);
						}
						.item{
							border:1px solid rgba(7,17,27,0.1);
							border-radius:1px;
							padding:0 6px;
							color:rgb(147,153,159);
							background:#fff;
						}
					}
					.time{
						position:absolute;
						right:0;
						top:0;
						line-height:12px;
						font-size:10px;
						color:rgb(7,17,27);
					}
				}
			}
		}
	}
</style>